
import styled from 'styled-components';
import React, { CSSProperties, useEffect, useState } from 'react';
import { PlusOutlined, LeftOutlined, LoadingOutlined } from '@ant-design/icons';
import { Button, Pagination, Drawer } from "antd";
import { useNavigate, useLocation, useParams } from "react-router-dom";

import { Workflow } from '@/components';
import { FlowProject } from '../../services';
import { TopHeader } from '../../components';
import { dsFindOne, ComparsionOperator } from '@/services/local';
import { WORKFLOW_CLASS_IDENTIFIER } from '@/services/constants';

export interface FlowEditorProps {
    style?: CSSProperties;
}

export const FlowEditor: React.FC<FlowEditorProps> = (props) => {

    //type file back
    const params = useParams();

    const navigate = useNavigate();

    const [loading, setLoading] = useState<boolean>(false);

    const [workflow, setWorkflow] = useState<any | null>(null);

    useEffect(() => {
        try {
            dsFindOne(0, WORKFLOW_CLASS_IDENTIFIER, {
                attributes: [{
                    name: 'identifier',
                    operator: ComparsionOperator.Equal,
                    value: params.workflow
                }]
            }).then((v) => {
                setWorkflow(v);
            }).catch((err) => {
                console.log(err);
            });
        } catch (err) {
            console.log(err);
        }
    }, [params.workflow]);

    if (!workflow || !params.workflow || !params.back) {
        return (
            <Container style={props.style}>
                <Header>
                    <TopHeader
                        leftButton={<Button type={'text'} onClick={async () => {
                            navigate(`/data/dataflow`);
                        }}><LeftOutlined /></Button>}
                        items={[
                        ]}
                        activeKey={''}
                        onChange={async (key: string) => {
                        }}></TopHeader>
                </Header>
                <Content>
                </Content>
            </Container>
        );
    }


    return (
        <Container style={props.style}>
            <Header>
                <TopHeader
                    leftButton={<Button type={'text'} onClick={async () => {
                        navigate(params.back);
                    }}><LeftOutlined /></Button>}
                    items={[
                    ]}
                    activeKey={''}
                    onChange={async (key: string) => {
                    }}></TopHeader>
            </Header>
            <Content>
                <Workflow source={workflow.content}></Workflow>
            </Content>
        </Container>
    );
}

const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
`;

const Header = styled.div`
    min-height: 45px;
    height: 45px;
    width: 100%;
    background-color: #FFFFFF;
    border-bottom: 1px solid #DEDEDE;
    display: flex;
`;

const Content = styled.div`
    flex:  1;
    width: 100%;
    overflow: hidden;
`;